axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/'
// 侧边栏
const big = document.querySelector('.big')
const right = document.querySelector('.right')

axios.get('/category/list').then(data => {
  // console.log(data.data.data.list)

  let arr = data.data.data.list
  let str = ''
  arr.forEach((ele, index) => {
    str += `   
      <a href="#"  data-id="${index}">
        ${ele.name}
      </a>
          `
    document.querySelector('.big').innerHTML = str
  })
  big.querySelector('a').classList.add('active')
})

// 右边商品
function render(arr2) {
  if (arr2 === undefined) return 
  let str2 = ''
  arr2.forEach(ele => {
    str2 += `
      <a href="#" class="tab">
      <img
        src="${ele.image.external_url}"
        alt=""
      />
      <p>${ele.name}</p>
    </a>
          `
  })
  right.innerHTML = str2
}

axios.get('/category/list').then(data => {
  let arr2 = data.data.data.list[0].children
  render(arr2)
})
// tab栏切换
big.addEventListener('click', async function (e) {
  // console.log(e.target);
  if (e.target.tagName === 'A') {
    big.querySelector('.active').classList.remove('active')
    e.target.classList.add('active')
    const { data } = await axios.get('/category/list')
    // console.log(data);
    const arr = data.data.list
    arr.forEach(function (ele, index) {
      if (e.target.dataset.id == index) {
        render(ele.children)
      }
    })
  }
})
